import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { Meta, Canvas, ArgsTable, Story } from '@storybook/addon-docs';

<Meta
  title="Components/Checkbox/Checkbox"
  component="bl-checkbox"
  argTypes={{
    label: {
      control: 'text'
    },
    disabled: {
      control: 'boolean',
      default: false
    },
    checked: {
      control: 'boolean',
      default: false
    },
    indeterminate: {
      control: 'boolean',
      default: false
    },
    required: {
      control: 'boolean',
    },
  }}
/>

export const CheckboxTemplate = (args) => html`<bl-checkbox
  ?disabled=${args.disabled}
  ?checked=${args.checked}
  name='${ifDefined(args.name)}'
  ?indeterminate=${args.indeterminate}
  ?required=${args.required}
  invalid-text='${ifDefined(args.customInvalidText)}'>${args.label}</bl-checkbox>`;

export const CheckboxLimitedWidthTemplate = (args) => html`<div style="max-width: 100px">
  ${CheckboxTemplate(args)}
</div>`;

export const CheckboxDifferentBackgroundTemplate = (args) => html`<div style="padding: 20px; background-color: var(--bl-color-primary-contrast);">
  ${CheckboxTemplate(args)}
</div>`;

export const FormTemplate = (args) => html`<form class="stacked-form" novalidate>
${CheckboxTemplate(args)}
<bl-button type="submit">Submit</bl-button>
</form>
`

# Checkbox

<bl-badge icon="document">[ADR](https://github.com/Trendyol/baklava/issues/136)</bl-badge>
<bl-badge icon="puzzle">[Figma](https://www.figma.com/file/RrcLH0mWpIUy4vwuTlDeKN/Baklava-Design-Guide?node-id=118%3A4068)</bl-badge>
<bl-badge icon="check_fill">RTL Supported</bl-badge>

Checkbox component can be used to control checked / unchecked statuses.

### Usage

Use checkbox component for getting true/false input from users.

* Don't use checkbox as an action button.
* Checkbox label is not required but if you want to use checbox without a label, set `aria-label` attribute.

## Basic

You can show label by just using slot.

<Canvas isColumn>
  <Story name="Basic Usage" args={{ label: 'Label' }}>
    {CheckboxTemplate.bind({})}
  </Story>
  <Story name="Basic Usage with Different Background color" args={{ label: 'Label' }}>
    {CheckboxDifferentBackgroundTemplate.bind({})}
  </Story>
</Canvas>

## Checked

Checked state can be set via `checked` attribute.

<Canvas>
  <Story name="Checked" args={{ label: 'checkbox', checked: true }}>
    {CheckboxTemplate.bind({})}
  </Story>
</Canvas>

## Indeterminate

Indeterminate state is regardless with `checked` state. A checkbox can be both `checked` and `indeterminate` at the
same time.Indeterminate state is mainly used for parent/child selections while parent checkbox represents if all of
the child will/should be checked or not. User interaction with checkbox (if checkbox is not disabled) takes checkbox
from `indeterminate` state. Checkbox doesn't go this state with a user interaction.

<Canvas>
  <Story name="Indeterminate" args={{ label: 'checkbox', indeterminate: true }}>
    {CheckboxTemplate.bind({})}
  </Story>
</Canvas>

## Indeterminate And Checked

Indeterminate state is regardless with `checked` state. A checkbox cannot be both `checked` and `indeterminate` at the
same time. Unless there is a user interaction, when `indeterminate` state is active `checked` state changes ignored.

<Canvas>
  <Story name="Indeterminate And Checked" args={{ label: 'checkbox', indeterminate: true, checked: true }}>
    {CheckboxTemplate.bind({})}
  </Story>
</Canvas>

## Disabled

Disabled state can be set via `disabled` attribute. A checkbox can be `disabled` and `checked` (and even `indeterminate`) at the same time.

<Canvas>
  <Story name="Disabled" args={{ label: 'Disabled', disabled: true }}>
    {CheckboxTemplate.bind({})}
  </Story>
  <Story name="Disabled and Checked" args={{ label: 'Disabled and Checked', disabled: true, checked: true }}>
    {CheckboxTemplate.bind({})}
  </Story>
  <Story name="Disabled, Checked and Indeterminate" args={{ label: 'Disabled, Checked and Indeterminate', disabled: true, checked: true, indeterminate: true }}>
    {CheckboxTemplate.bind({})}
  </Story>
</Canvas>

## Validation

Checkbox component has 'required' validation rule. Also custom invalid text can be passed by 'invalid-text' attribute

<Canvas isColumn>
  <Story name="Validation" args={{ label: 'Checkbox with default validation message',required:true,name:"accept_term" }}>
    {CheckboxTemplate.bind({})}
  </Story>
  <Story name="Validation with Custom Text" args={{ label: 'Checkbox with default custom validation message',required:true,name:"accept_term",customInvalidText:'This field is mandatory' }}>
    {CheckboxTemplate.bind({})}
  </Story>
</Canvas>

## Form

Provide the name and the value of the checkbox element, so that its value can be set on the form element

<Canvas>
  <Story name="Form Usage" args={{ label: 'Terms and conditions',required:true,name:"accept_term" }}>
    {FormTemplate.bind({})}
  </Story>
</Canvas>

## Multiline labels

If label doesn't fit the row and goes multiline, checkmark stays on top.

<Canvas>
  <Story name="Multiline label" args={{ label: "Very long label that doesn't fit single line" }}>
    {CheckboxLimitedWidthTemplate.bind({})}
  </Story>
</Canvas>

Also if a single word doesn't fit the line, it also being forced to multiline (with `overflow-wrap: break-word;`).

<Canvas>
  <Story name="A very long word" args={{ label: "Some Short and Some/Very&LongSingleWords Together" }}>
    {CheckboxLimitedWidthTemplate.bind({})}
  </Story>
</Canvas>

## RTL Support

The checkbox component supports RTL (Right-to-Left) text direction. You can enable RTL mode by setting the `dir` attribute on a parent element or the `html` tag.

<Canvas>
  <Story name="RTL Support">
    {() => html`
      <div style="display: flex; gap: 32px;">
        <div>
          <p style="margin-bottom: 8px;">LTR (Left-to-Right)</p>
          <bl-checkbox>Accept terms and conditions</bl-checkbox>
          <bl-checkbox checked>Remember me</bl-checkbox>
        </div>
        <div dir="rtl">
          <p style="margin-bottom: 8px;">RTL (Right-to-Left)</p>
          <bl-checkbox>قبول الشروط والأحكام</bl-checkbox>
          <bl-checkbox checked>تذكرني</bl-checkbox>
        </div>
      </div>
    `}
  </Story>
</Canvas>

Here's a vanilla JavaScript and HTML example of how to use RTL support:

```html
<!-- index.html -->
<html>
<head>
  <meta charset="UTF-8">
  <title>Baklava Checkbox RTL Example</title>
  <!-- Import Baklava's CSS and JavaScript -->
  <script type="module" src="path/to/baklava.js"></script>
  <style>
    .container {
      margin: 20px;
    }
    .checkbox-container {
      display: flex;
      gap: 32px;
      margin-top: 20px;
    }
    .checkbox-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <button onclick="toggleDirection()">Toggle RTL/LTR</button>

    <div class="checkbox-container">
      <!-- LTR Example -->
      <div class="checkbox-group">
        <h3>LTR Checkboxes</h3>
        <bl-checkbox>Accept terms and conditions</bl-checkbox>
        <bl-checkbox checked>Remember me</bl-checkbox>
      </div>

      <!-- RTL Example -->
      <div class="checkbox-group" dir="rtl">
        <h3>RTL Checkboxes</h3>
        <bl-checkbox>قبول الشروط والأحكام</bl-checkbox>
        <bl-checkbox checked>تذكرني</bl-checkbox>
      </div>
    </div>
  </div>

  <script>
    // Example of dynamically changing direction
    const toggleDirection = () => {
      const rtlContainer = document.querySelector('[dir="rtl"]');
      rtlContainer.dir = rtlContainer.dir === 'rtl' ? 'ltr' : 'rtl';
    };

    // Example of creating a checkbox programmatically
    const createCheckbox = (isRTL) => {
      const container = document.createElement('div');
      if (isRTL) container.dir = 'rtl';

      const checkbox = document.createElement('bl-checkbox');
      checkbox.textContent = isRTL ? 'قبول الشروط والأحكام' : 'Accept terms and conditions';

      container.appendChild(checkbox);
      document.body.appendChild(container);
    };
  </script>
</body>
</html>
```

## Reference

<ArgsTable of="bl-checkbox" />
